<template>
  <div class="app-container">
    <!-- 上部分表单 -->
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="68px"
      class="globalSerchFormStyle"
    >
      <el-row>
        <el-col :span="6" v-if="authUser">
          <el-form-item label="地区" prop="districtIds">
            <el-select
              v-model="queryParams.districtIds"
              placeholder="请选择地区"
              size="small"
              filterable
              clearable
              style="width: 190px"
              @change="handleSelectChangeEnterprise"
            >
              <el-option
                v-for="(item, index) in areaList"
                :key="index"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="油企名称"
            prop="enterpriseId"
            size="small"
            style="padding-top: 4px"
          >
            <el-select
              v-model="queryParams.enterpriseId"
              :clearable="true"
              filterable
              placeholder="请选择油企"
              style="width: 190px"
              @change="handleSelectChange"
            >
              <el-option
                v-for="(item, index) in enterpriseList"
                :key="index"
                :value="item.enterpriseId"
                :label="item.enterpriseName"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item
            label="油站名称"
            prop="stationId"
            clearable
            size="small"
            style="padding-top: 4px"
          >
            <el-select
              v-model="queryParams.stationId"
              :clearable="true"
              filterable
              placeholder="请选择油站"
              style="width: 190px"
            >
              <el-option
                v-for="item in stationList"
                :key="item.stationId"
                :label="item.stationName"
                :value="item.stationId"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- <el-col :span="6">
          <el-form-item label="加油员" prop="oilPersonnel">
            <el-input
              v-model="queryParams.oilPersonnel"
              placeholder="请输入加油员"
              clearable
              style="width: 190px;"
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col> -->
        <el-col :span="6">
          <el-form-item label="创建时间" prop="createdDate">
            <el-date-picker
              size="small"
              v-model="dateRangeCreatedDate"
              value-format="yyyy-MM-dd HH:mm:ss"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 190px"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-show="collapse">
        <el-col :span="6">
          <el-form-item label="油品名称" prop="oilName">
            <el-select
              v-model="queryParams.oilName"
              placeholder="油品名称"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option :value="undefined" selected>全部</el-option>
              <el-option
                :value="ele.oilId"
                v-for="ele in oilList"
                :key="ele.oilId"
                :label="ele.oilName + '-' + ele.oilClass + '-' + ele.oilType"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="支付方式" prop="payType">
            <el-select
              v-model="queryParams.payType"
              placeholder="支付方式"
              clearable
              size="small"
              style="width: 190px"
            >
              <el-option :value="undefined" selected>全部</el-option>
              <el-option value="wx" label="微信支付"></el-option>
              <el-option value="zfb" label="支付宝支付"></el-option>
              <el-option value="dzk" label="电子卡支付"></el-option>
              <el-option value="xj" label="现金支付"></el-option>
              <el-option value="yhk" label="银行卡支付"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="6">
          <el-form-item label="所在地区" prop="cityValue">
            <yf-city />
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>
    <el-form
      :model="orderSum"
      ref="orderSum"
      :inline="true"
      label-width="128px"
    >
      <!-- <el-form-item label="会员名" prop="customerName">
        <el-input
          v-model="queryParams.customerName"
          placeholder="请输入客户名"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item> -->
      <el-form-item label="订单数" prop="amt">
        <div style="font-size: 1.5vw">{{ orderSum.countNum }}笔</div>
      </el-form-item>
      <el-form-item label="实付" prop="receivableAmt">
        <div style="font-size: 1.5vw">{{ orderSum.amt }}元</div>
      </el-form-item>
      <el-form-item label="应付" prop="orderLiters">
        <div style="font-size: 1.5vw">{{ orderSum.receivableAmt }}元</div>
      </el-form-item>
      <el-form-item label="优惠总金额" prop="countNum">
        <div style="font-size: 1.5vw">{{ orderSum.discountAmt }}元</div>
      </el-form-item>
      <el-form-item label="数量" prop="countNum">
        <div style="font-size: 1.5vw">{{ orderSum.orderLiters }}(L/kg)</div>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="global_el_rowStyle">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleQuery"
          size="mini"
          >搜索</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          type="primary"
          plain
          >重置</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          plain
          size="mini"
          style="margin-left: 10px"
          id="closeSearchBtn"
          @click="
            (closeSearch) => {
              collapse = !collapse;
            }
          "
        >
          {{ collapse ? "收起" : "展开更多" }}
          <i :class="collapse ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"></i>
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          plain
          >导出</el-button
        >
      </el-col>
    </el-row>
    <!-- 表格 -->
    <!-- <div class="card-table"> -->
    <el-table style="width: 100%" :data="orderList" stripe v-loading="loading">
      <af-table-column label="地区" align="left" prop="district" width="150" />
      <af-table-column
        label="油企ID"
        align="left"
        prop="enterpriseId"
        width="150"
      />
      <af-table-column
        label="油企"
        align="left"
        prop="enterpriseName"
        width="150"
      />
      <af-table-column
        label="油站ID"
        align="left"
        prop="stationId"
        width="150"
      />
      <af-table-column
        label="油站"
        align="left"
        prop="stationName"
        width="150"
      />
      <af-table-column
        label="订单笔数"
        align="left"
        prop="countNum"
        width="150"
      />
      <af-table-column label="实付金额" align="left" prop="amt" width="150" />
      <af-table-column
        label="应付金额"
        align="left"
        prop="receivableAmt"
        width="150"
      />
      <af-table-column
        label="优惠总金额"
        align="left"
        prop="discountAmt"
        width="150"
      />
      <af-table-column
        label="数量(L/kg)"
        align="left"
        prop="orderLiters"
        width="150"
      />
    </el-table>
    <!-- </div> -->
    <!-- 分页 -->
    <el-pagination
      class="fr"
      style="margin-top: 8px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryParams.pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="queryParams.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { timeComparison } from "@/utils/timeConversion";
import {
  listOrder,
  exportOrder,
  printOrderInfo,
  listEnterpriseData,
  listEnterpriseDataExport,
  listEnterpriseDataSum,
  newSelectStatisticsPayOrderSum,
  newSelectStatisticsPayOrderList,
  newSelectStatisticsPayOrderListExport,
} from "@/api/station/order";
import {
  getEnterpriseByDistrict,
  getStationByEnterprise,
} from "@/api/dataSource/saleReport";
import { listPrice, getPrice } from "@/api/station/price";
import { listManage } from "@/api/station/manage";
import { getOilListByLogin } from "@/api/dept";
import { enterpriseList } from "@/api/station/orderHistory";
import { listEnterpriseStation } from "@/api/dept";

export default {
  name: "Order_Oil",
  data() {
    return {
      loading: false,
      //创建订单时间间隔
      dateRangeCreatedDate: [],
      // 总条数
      total: 0,
      // 订单支付表格数据
      orderList: [],
      oilNameOptions: [],
      // 字典
      payTypeOptions: [],
      // 下拉油站
      stationOptions: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        levelId: this.levelId,
        pageNum: 1,
        pageSize: 10,
        oilGun: null,
        oilName: null,
        stationId: null,
        orderType: null,
        //orderType:1,
        oilPersonnel: null,
        createdDate: null,
        likeConsumer: null,
        orderNo: null,
        customerPhone: null,
      },
      orderSum: {
        amt: null,
        receivableAmt: null,
        orderLiters: null,
        countNum: null,
        discountAmt: null,
      },
      // 表单校验
      rules: {},
      reprint: false,
      oilList: [],
      areaList: [
        {
          label: "华北地区",
          value: "1",
        },
        {
          label: "华南地区",
          value: "2",
        },
        {
          label: "西南地区",
          value: "3",
        },
        {
          label: "西北地区",
          value: "4",
        },
        {
          label: "东北地区",
          value: "5",
        },
      ],
      collapse: false,
      enterpriseList: [],
      stationList: [],
    };
  },
  created() {
    this.getList();
    this.getOilList();
    let userLevel = this.$store.state.user.userLevel;
    if (["1", "5", "6"].includes(userLevel)) {
      this.getEnterpriseList();
    }
    if (this.presentEnterprise && this.presentEnterprise.enterpriseId) {
      this.getStationList(this.presentEnterprise.enterpriseId);
    }
  },
  computed: {
    authUser() {
      let roles = this.$store.state.user.roles;
      if (roles.includes("admin")) {
        return true;
      } else {
        return false;
      }
    },
  },
  methods: {
    // 选择地区查询油企
    handleSelectChangeEnterprise(value) {
      this.enterpriseList = [];
      this.stationList = [];
      this.queryParams.enterpriseId = null;
      this.queryParams.stationId = null;
      this.getEnterpriseList(value);
    },
    // 选择油企查询油站
    handleSelectChange(value) {
      this.stationList = [];
      this.queryParams.stationId = null;
      this.getStationList(value);
    },
    // 查询油企
    getEnterpriseList(value) {
      let data = {};
      if (value) {
        data.district = value;
      }
      getEnterpriseByDistrict(data).then((res) => {
        this.enterpriseList = res.data || [];
      });
    },
    getStationList(val) {
      getStationByEnterprise({ enterpriseId: val }).then((res) => {
        this.stationList = res.data || [];
      });
    },
    getOilList() {
      getOilListByLogin()
        .then((res) => {
          if (res.code == 200) {
            this.oilList = res.rows;
          } else {
            throw new Error("");
          }
        })
        .catch(() => {
          this.msgError("拉取油品列表失败，请刷新网页~");
        });
    },
    payTypeFotmat(row, column) {
      if (row.payType === "wx") {
        return "微信支付";
      } else if (row.payType === "zfb") {
        return "支付宝";
      } else if (row.payType === "xj") {
        return "现金支付";
      } else if (row.payType === "dzk") {
        return "电子卡支付";
      } else if (row.payType === "POS") {
        return "POS机支付";
      } else if (row.payType === "yzf") {
        return "预支付";
      } else if (row.payType === "kbzf") {
        return "卡包支付";
      }
    },
    statusFotmat(row, column) {
      if (row.status === "0") {
        return "未支付";
      } else if (row.status === "1") {
        return "已支付";
      } else if (row.status === "2") {
        return "线下退款";
      } else if (row.status === "3") {
        return "线上退款";
      }
    },
    /** 查询订单支付列表 */
    getList() {
      this.loading = true;
      this.queryParams.levelId = this.levelId;
      let userLevel = this.$store.state.user.userLevel;
      if (["1", "5", "6"].includes(userLevel)) {
        this.queryParams.isDeleted = 0;
      }

      const queryParams = this.addDateRange(
        this.queryParams,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison(
      //   "earching",
      //   queryParams.beginTime,
      //   queryParams.endTime
      // );
      // if (!time) return (this.loading = false);

      newSelectStatisticsPayOrderList(queryParams)
        .then((response) => {
          this.orderList = response.rows;
          this.total = response.total;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
      newSelectStatisticsPayOrderSum(queryParams)
        .then((response) => {
          this.orderSum = response.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleSizeChange(size) {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = size;
      this.getList();
    },
    handleCurrentChange(page) {
      this.queryParams.pageNum = page;
      this.getList();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRangeCreatedDate = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    //打印订单小票
    printOrderInfo(row) {
      printOrderInfo({ orderId: row.orderId }).then((response) => {
        this.msgSuccess("小票打印成功");
      });
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.addDateRange(
        this.queryParams,
        this.dateRangeCreatedDate
      );

      // const time = timeComparison(
      //   "export",
      //   queryParams.beginTime,
      //   queryParams.endTime
      // );
      // if (!time) return;

      this.$confirm("是否确认导出所有订单支付数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return newSelectStatisticsPayOrderListExport(queryParams);
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.app-container {
  margin-top: -15px;
}

.button-from {
  width: 100%;
  display: flex;
  flex-wrap: wrap;

  .button-style1 {
    display: inline-block;
    width: 80px;

    .el-button {
      margin: 0 0 0 15px;
    }
  }
}

::v-deep .card-table {
  padding: 10px;
  margin-top: 20px;
  background-color: #f8f8f8;

  .el-button {
    margin: 0 5px 0 0;
  }
}

// 表格样式
// ::v-deep .el-form-item {
//   margin-bottom: 0;
//   .el-form-item__label {
//     padding: 0;
//     margin: 0;
//     height: 29px;
//     font-weight: 400;
//     font-size: 12px;
//   }
//   .el-button--cyan {
//     margin-center: 20px;
//   }
// }
::v-deep .el-table {
  border: 1px #f8f8f8 solid;
  border-bottom: 1px #dfe6ec solid;
}

::v-deep .is-center {
  border: 1px transparent solid;
  border-bottom: 1px #f8f8f8 solid;
}
</style>
